{% extends 'base.html' %}
{% block title %}Chat{% endblock %}

{% block content %}
    <div class="pusher">
        <div class="chat-box">
            <div class="messages">
                <div class="ui text loader">Loading messages...</div>
                {% include 'chat/_messages.html' %}
            </div>
        </div>
        <div class="input-area">
            <div class="ui grid form">
                <div class="ten wide column">
                    <div class="field fluid message-box">
                        {% if current_user.is_authenticated %}
                            <img class="pop-card input-avatar" data-position="bottom left"
                                 data-href="{{ url_for('chat.get_profile', user_id=current_user.id) }}"
                                 src="{{ current_user.gravatar }}">
                            <textarea rows="3" id="message-textarea" maxlength="300"
                                      placeholder="Write your message here..."></textarea>
                        {% else %}
                            <div class="ui floating message">Please <a href="{{ url_for('auth.login') }}">Sign in</a> or
                                <a href="{{ url_for('auth.register') }}">Sign up</a> to send message.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
        var socket = io('/');
    </script>
{% endblock %}